<template>
  <div>
    <el-upload
      class="components-file-upload"
      :class="{disabled: (!isMultiple && comsFileUploadList.length > 0)}"
      action="api/file/upload"
      :headers="comsFileUploadHeaders"
      :file-list="comsFileUploadList"
      :on-success="comsFileUploadSuccess"
      :on-remove="comsFileUploadRemove"
      :before-upload="comsFileUploadBefore"
      :multiple="isMultiple"
      v-loading="loading"
      :show-file-list="isShowFileList"
      :limit="limitNum"
      :disabled="comsFileUploadDisabled"
    >
      <el-button
        size="small"
        type="primary"
        :disabled="buttomDisabled"
        v-if="!(!isMultiple && comsFileUploadList.length > 0)"
      >点击上传</el-button>
    </el-upload>
  </div>
</template>

<script>
import { setTimeout } from "timers";
import PROJECT_COMMON from "@/common/js/project/common";
import { type } from "os";
export default {
  data() {
    return {
      buttomDisabled: false,
      comsFileUploadHeaders: {
        Authorization: "Bearer " + this.$store.state.user.token
      },
      comsFileUploadList: [],
      hasDownloadOldFiles: false,
      loading: false
    };
  },
  props: {
    md5s: {
      type: String
    },
    multiple: {
      type: Boolean,
      default: false
    },
    showFileList: {
      type: Boolean,
      default: true
    },
    limit: {
      type: Number
    },
    tag: {
      type: Number
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  async created() {
    if (this.md5s && this.md5s != "") {
      this.comsFileUploadList = await this.comsFileUploadGetUrl(this.md5s);
      this.hasDownloadOldFiles = true;
    } else {
      this.comsFileUploadList = [];
    }
  },
  watch: {
    async md5s() {
      if (this.md5s && this.md5s != "" && !this.hasDownloadOldFiles) {
        this.comsFileUploadList = await this.comsFileUploadGetUrl(this.md5s);
        this.hasDownloadOldFiles = true;
      } else {
        if (!this.md5s || this.md5s == "") {
          this.comsFileUploadList = [];
        }
        this.hasDownloadOldFiles = true;
      }
    }
  },
  computed: {
    isMultiple: {
      get() {
        return this.multiple;
      }
    },
    isShowFileList: {
      get() {
        return this.showFileList;
      }
    },
    limitNum: {
      get() {
        return this.limit;
      }
    },
    comsFileUploadDisabled: {
      get() {
        if(this.disabled == true){
          this.buttomDisabled = true;
        }
        return this.disabled;
      }
    }
  },
  methods: {
    async comsFileUploadGetUrl(md5s) {
      if (!md5s || md5s == "") return [];
      this.loading = true;
      const res = await this.$http({
        url: "/api/file/url",
        method: "POST",
        data: { md5s: md5s }
      });
      this.loading = false;
      if (res.code == 0) {
        return res.data.list;
      }
      return [];
    },
    comsFileUploadSuccess(res, file) {
      if (
        res.code == 0 &&
        res.data.success_list &&
        res.data.success_list.length > 0
      ) {
        let _md5s = [];
        if (this.md5s && this.md5s != "") {
          _md5s = this.md5s.split(",");
        }
        res.data.success_list.forEach(item => {
          _md5s.push(item.md5);
        });
        _md5s = _md5s.join(",");

        this.$emit("update:md5s", _md5s);
        this.$emit("callback", this, [file]);
      } else {
        this.comsFileUploadRemove();
        this.$commonUtils.showErrorToast("文件上传失败");
      }
    },
    comsFileUploadRemove(res, fileList) {
      let _md5s = [];
      fileList.forEach(item => {
        if (item.md5) {
          _md5s.push(item.md5);
        } else {
          if (item.response.data.success_list) {
            item.response.data.success_list.forEach(val => {
              _md5s.push(val.md5);
            });
          }
        }
      });
      if (_md5s.length == 0) this.comsFileUploadList = [];
      _md5s = _md5s.join(",");
      setTimeout(() => {
        this.$emit("update:md5s", _md5s);
        this.$emit("callback", this, fileList);
      }, 500);
    },
    comsFileUploadBefore(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$commonUtils.showErrorToast("文件大小不能超过 2MB!");
      }
      return isLt2M;
    }
  }
};
</script>

<style lang="scss">
.components-file-upload {
  .el-upload--picture-card {
    height: 100px;
    width: 100px;
    line-height: 104px;
  }
  .el-upload-list--picture-card .el-upload-list__item {
    height: 100px;
    width: 100px;
  }
}
.disabled .el-upload--picture-card {
  display: none;
}
</style>
